<template>
  <!-- 创建时间：2023/5/8 -->
  <!-- 作者：admin -->
  <!-- TranslatePanel组件说明： 滑动面板-->
    <transition name="panelShow">
        <div class="panel"
             ref="mainParent"
             v-if="isShow"
             @scroll="handleScroll">
            <Scrollbar ref="scrollbar"/>
            <slot name="showContent"></slot>
        </div>
    </transition>
</template>

<script>
import Scrollbar from "@/components/Scrollbar.vue";

export default {
    name: "TranslatePanel",
    components: {Scrollbar},
    props: ['isShow'],
    methods: {
        handleScroll() {
            const {scrollbar} = this.$refs
            scrollbar.handleScroll()
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
  padding: 84px @containerPadding 96px @containerPadding;
  box-sizing: border-box;
  background-color: white;
  z-index: 50;
  scrollbar-width: none;

  //隐藏掉原生的滚动条
  &::-webkit-scrollbar {
    width: 0;
  }
}

.panelShow-enter-active, .panelShow-leave-active {
  transition: all .5s ease;
}

.panelShow-enter, .panelShow-leave-to {
  transform: translateY(100%);
}

.panelShow-enter-to, .panelShow-leave {
  transform: translateY(0);
}
</style>